import React, {Component} from 'react';
import {Table, Button, Modal, Input, Select, message} from "antd";
import {URL} from '../../constant/Constant'

const {Option} = Select;


export default class Users_list extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            visibleMessage: false,
            visiblePwd: false,
            name: '',
            email: '',
            role: '',
            description: '',
            status: '',
            location: '',
            password: '',
            ID: '',
        }
    }

    // 弹出框方法
    // 修改用户信息
    showModal = (i) => {
        const userData = this.state.data[i];
        this.setState({
            visibleMessage: true,
            name: userData.username,
            email: userData.email,
            role: userData.role,
            description: userData.description,
            status: userData.status,
            location: userData.location,
            password: userData.password,
            ID: userData.id,
        })
    };
    //修改用户密码
    updatePwd = (i) => {
        const userData = this.state.data[i];
        this.setState({
            visiblePwd: true,
            name: userData.username,
            status: userData.status,
            email: userData.email,
            password: userData.password,
            ID: userData.id,
        })
    }

    handleOk = () => {
        const ID = this.state.ID
        const name = this.state.name;
        const email = this.state.email;
        const role = this.state.role;
        const description = this.state.description;
        const status = this.state.status;
        const location = this.state.location;
        const formData = new FormData();
        formData.append('username', name);
        formData.append('email', email);
        formData.append('role', role);
        formData.append('description', description);
        formData.append('status', status);
        formData.append('location', location);
        console.log(formData);
        fetch(URL.urlRoot + URL.userListUpdate + ID, {
            method: 'POST',
            body: formData
        })
            .then(res => {
                return res.json();
            })
            .then(res => {
                if (res.code === 0) {
                    this.setState({
                        data: res.object,
                        visibleMessage: false,
                    })
                }

            })
        message.info('修改成功！');
    };

    handleOkPwd = () => {
        const ID = this.state.ID;
        const name = this.state.name;
        const email = this.state.email;
        const password = this.state.password;
        const status = this.state.status;
        const formData = new FormData();
        formData.append('username', name);
        formData.append('email', email);
        formData.append('password', password);
        formData.append('status', status);
        fetch(URL.urlRoot + URL.changeMM+ ID, {
            method: 'POST',
            body: formData,
        })
            .then(res => {
                return res.json()
            })
            .then(res => {
                if (res.code == 0) {
                    message.info('密码修改成功!');
                    this.setState({
                        visiblePwd: false,
                    })
                }
            })
            .catch(err => console.log(err))
    }
    handleCancelPwd = () => {
        this.setState({
            visiblePwd: false,
        })
    }

    // 根据state的变化来改变

    // 删除用户
    deleteUser = (i) => {
        const ID = this.state.data[i].id;
        fetch(URL.urlRoot + URL.changeMM + ID, {
            method: 'DELETE'
        })
            .then(res => {
                return res.json()
            })
            .then(res => {
                if (res.code === 0) {
                    this.setState({
                        data: res.object
                    })
                }
            })
            .catch(err => {
                console.log(err);
            })
        message.info('删除成功！');
    }

    handleCancel = e => {
        this.setState({
            visibleMessage: false,
        });
    };

    // 弹出框表单方法
    handleName = (e) => {
        this.setState({
            name: e.target.value
        })
    }
    handleEmail = (e) => {
        this.setState({
            email: e.target.value
        })
    }
    handleSelect = (value) => {
        this.setState({
            role: value
        })
    }
    handleDes = (e) => {
        this.setState({
            description: e.target.value
        })
    }
    handleStatus = (e) => {
        this.setState({
            status: e.target.value
        })
    }
    handleLoc = (e) => {
        this.setState({
            location: e.target.value
        })
    }
    handlepwd = (e) => {
        this.setState({
            password: e.target.value
        })
    }

    componentDidMount = () => {
        fetch(URL.urlRoot + URL.userList, {
            method: 'GET'
        })
            .then(res => {
                return res.json();
            })
            .then(res => {
                this.setState({
                    data: res
                })
            })
            .catch(err => {
                console.log(err);
            })
    }

    render() {
        const column = [
            {
                title: 'name',
                dataIndex: 'username',
                key: 'username',
                width: '10%'
            },
            {
                title: 'email',
                dataIndex: 'email',
                key: 'email',
                width: '10%'
            },
            {
                title: 'role',
                dataIndex: 'role',
                key: 'role',
                width: '10%'
            },
            // {
            //     title: 'description',
            //     dataIndex: 'description',
            //     key: 'description',
            //     width: '15%'
            // },
            {
                title: 'status',
                dataIndex: 'status',
                key: 'status',
                width: "10%"
            },
            {
                title: 'location',
                dataIndex: 'location',
                key: 'location',
                width: '10%'
            },
            {
                title: 'action',
                dataIndex: 'CZ',
                key: 'CZ',
                width: '30%'
            }
        ]
        const datas = [];
        const item = this.state.data
        const len = this.state.data.length;
        const roleType = ['超级管理员', '专家', '课题组成员', '普通用户', '课题组负责人', '水泥厂用户']
        const workType = ['离职', '在岗'];
        for (let i = 0; i < len; i++) {
            datas.push({
                username: item[i].username,
                email: item[i].email,
                role: roleType[item[i].role],
                // description: item[i].description,
                status: workType[item[i].status],
                location: item[i].location,
                CZ: <span>
                     <Button type="primary" onClick={() => this.showModal(i)}>修改信息</Button>
                     <Button type="primary" style={{marginLeft: 2, marginRight: 2}}
                             onClick={() => this.deleteUser(i)}>删除</Button>
                     <Button type="primary" onClick={() => this.updatePwd(i)}>修改密码</Button>
                </span>
            })
        }
        return (
            <div id="news_list">
                <div className="col-md-12 col-sm-12">
                    <h2>用户列表</h2>
                    <h4>您可以管理用户。</h4>
                    <Table columns={column} dataSource={datas}
                           pagination={{
                               showSizeChanger: true,
                               defaultCurrent: 1,
                               defaultPageSize: 4,
                               total: len,
                               pageSizeOptions: ['4', '10', '30', '50'],//页数选择
                           }}
                    />
                </div>
                {/* 弹出框 */}
                <div>
                    <Modal
                        title="修改用户信息"
                        visible={this.state.visibleMessage}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                    >
                        <div style={{textAlign: 'center'}} className="modal">
                            <label style={{width: '100px', float: 'left', textAlign: 'right'}}>name:</label>
                            <Input style={{width: 300}} value={this.state.name} onChange={this.handleName}/>
                            <p style={{marginTop: '15px'}}><label
                                style={{width: '100px', float: 'left', textAlign: 'right'}}>email:</label>
                                <Input style={{width: 300}} value={this.state.email} onChange={this.handleEmail}/></p>
                            <p><label style={{width: '100px', float: 'left', textAlign: 'right'}}>role:</label><Select
                                style={{width: 300}}
                                placeholder="select a role"
                                onChange={this.handleSelect}
                                value={roleType[this.state.role]}
                            >
                                <Option value="0">超级管理员</Option>
                                <Option value="1">专家</Option>
                                <Option value="2">课题组成员</Option>
                                <Option value="3">普通用户</Option>
                                <Option value="4">课题组负责人</Option>
                                <Option value="5">水泥厂用户</Option>
                            </Select>
                            </p>
                            {/* <p><label style = {{width:'100px',float:'left',textAlign:'right'}} >description:</label>
                    <Input style = {{width:300}} onChange = {this.handleDes} value = {this.state.description} /></p> */}
                            <p><label style={{width: '100px', float: 'left', textAlign: 'right'}}>status:</label>
                                <Input style={{width: 300}} onChange={this.handleStatus} value={this.state.status}/></p>
                            <p><label style={{width: '100px', float: 'left', textAlign: 'right'}}>location:</label>
                                <Input style={{width: 300}} value={this.state.location} onChange={this.handleLoc}/></p>
                        </div>
                    </Modal>
                </div>
                {/* 修改用户密码 */}
                <div>
                    <Modal
                        title="修改密码"
                        visible={this.state.visiblePwd}
                        onOk={this.handleOkPwd}
                        onCancel={this.handleCancelPwd}
                    >
                        <div style={{textAlign: 'center'}} className="modal">
                            <label style={{width: '100px', float: 'left', textAlign: 'right'}}>name:</label>
                            <Input style={{width: 300}} value={this.state.name} onChange={this.handleName}/>
                            <p style={{marginTop: '15px'}}><label
                                style={{width: '100px', float: 'left', textAlign: 'right'}}>email:</label>
                                <Input style={{width: 300}} value={this.state.email} onChange={this.handleEmail}/></p>
                            <p><label style={{width: '100px', float: 'left', textAlign: 'right'}}>password:</label>
                                <Input style={{width: 300}} onChange={this.handlepwd}/></p>
                        </div>
                    </Modal>
                </div>
            </div>
        )
    }
}